<template>
    <div class="wallet">
        <cube-scroll ref="scroll" :style="{height:page_height+'px'}">

            <!--S头部-->
            <div id="header" ref="header">
                <div class="header">
                    <h2>余额</h2>
                    <h3>￥{{money}}</h3>
                </div>

                <!--S提现按钮-->
                <cube-button class="deposit-button" :primary="true" :disabled="depositing" @click="deposit">提现</cube-button>
                <!--E提现按钮-->
            </div>
            <!--E头部-->

            <!--S提现列表-->
            <cube-tab-bar ref="tabs" id="list-tabs" :data="tabs" v-model="tabs_selected" :showSlider="true" @change="tabsChange"></cube-tab-bar>

            <cube-tab-panels id="deposit-list" v-model="tabs_selected">
                <cube-tab-panel v-for="item in tabs" :label="item.label" :key="item.value">

                    <cube-scroll ref="listScroll" :options="tabs[tabs_index].scroll_options" :style="{height:list_height+'px'}" @pulling-up="upLoading">
                        <template v-if="item.list.length > 0">
                            <dl v-for="itema in item.list" v-bind:key="itema.id">
                                <dt>￥{{itema.money}}</dt>
                                <dd>{{itema.time}}</dd>
                            </dl>
                        </template>
                        <empty v-else>暂时提现数据</empty>
                    </cube-scroll>

                </cube-tab-panel>
            </cube-tab-panels>
            <!--E提现列表-->



        </cube-scroll>
    </div>
</template>

<script>
import store from "../../store.js";
import empty from "../../components/empty/Empty.vue";
export default {
    name:"wallet",
    data(){
        return {
            page_height:store.state.height,
            list_height:store.state.height,             //提现列表高度
            depositing:false,
            money:0,  //用户余额
            deposit_limit:1.00,  //最低提现金额限制
            tabs:[  //列表tabs
                {
                    label:"提现中",
                    list:[],
                    status:0,
                    limit:[0,10],
                    scroll_options: {
                        pullUpLoad: {
                            txt: {
                                more: "加载中",
                                noMore: "--------我也是有底线的--------"
                            },
                        },
                        scrollbar:true
                    }
                },
                {
                    label: "提现成功",
                    list:[],
                    status:1,
                    limit:[0,10],
                    scroll_options: {
                        pullUpLoad: {
                            txt: {
                                more: "加载中",
                                noMore: "--------我也是有底线的--------"
                            }
                        },
                        scrollbar:true
                    }
                },
                {
                    label:"提现失败",
                    list:[],
                    status:2,
                    limit:[0,10],
                    scroll_options: {
                        pullUpLoad: {
                            txt: {
                                more: "加载中",
                                noMore: "--------我也是有底线的--------"
                            },
                        },
                        scrollbar:true
                    }
                }
            ],
            tabs_selected:"提现中",
            tabs_index:0    //tabs下标
        };
    },
    components:{
      empty
    },
    beforeRouteEnter(to,from,next){
        next(vm=>{
            vm.getDepositLimit();
            vm.getMoney();
            vm.getList();
        });
    },
    mounted(){
        this.list_height = document.documentElement.clientHeight - this.$refs.header.getBoundingClientRect().height - this.$refs.tabs.$el.getBoundingClientRect().height;
    },
    methods:{
        //获取用户余额
        getMoney(){
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"member",
                doing:"easyFind",
                uid:this.$sysinfo.uid,
                return:["money"]
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.money = res.data.data.money;
                    }
                })
                .catch();
        },
        //获取系统最低提现金额
        getDepositLimit(){
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"setting",
                doing:"getSetting",
                returns:["deposit_limit"]
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.deposit_limit = parseFloat(res.data.data.deposit_limit);
                    }
                })
                .catch();
        },
        //tabs导航切换
        tabsChange(value){
            switch(value){
                case "提现中":
                    this.tabs_index = 0;
                    break;
                case "提现成功":
                    this.tabs_index = 1;
                    break;
                case "提现失败":
                    this.tabs_index = 2;
                    break;
            }
            this.getList();
        },
        //获取列表
        getList(){
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"exchange",
                doing:"li",
                uid:this.$sysinfo.uid,
                status:this.tabs[this.tabs_index].status,
                limit:this.tabs[this.tabs_index].limit
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.tabs[this.tabs_index].limit[0] += this.tabs[this.tabs_index].limit[1];
                        this.tabs[this.tabs_index].list.push(...res.data.data);
                        this.$refs.listScroll[this.tabs_index].forceUpdate(true,true);
                    }else{
                        this.$refs.listScroll[this.tabs_index].forceUpdate(false,false);
                    }
                    this.$nextTick(()=>{
                        if(this.$refs.listScroll[this.tabs_index].$el.querySelector(".cube-scroll-list-wrapper").getBoundingClientRect().height-1 <= Math.ceil(this.list_height)){
                            this.tabs[this.tabs_index].scroll_options.pullUpLoad = false;
                        }
                        this.$refs.listScroll[this.tabs_index].refresh();
                    });
                })
                .catch();
        },
        //上拉加载
        upLoading(){
          this.getList();
        },
        //提现
        deposit() {
            if(parseFloat(this.money) < this.deposit_limit){
                this.$createToast({
                    time: 1000,
                    type:"error",
                    txt: "余额不足"+this.deposit_limit+"元",
                    mask:true
                }).show();
                return false;
            }
            this.depositing = true;
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"member",
                doing:"deposit",
                uid:this.$sysinfo.uid,
            }))
                .then((res)=>{
                    this.depositing = false;
                    if(res.data.status == "success"){
                        this.getMoney();
                        this.$createToast({
                            time: 1000,
                            type:"correct",
                            txt: res.data.success_msg,
                            mask:true
                        }).show();
                    }else{
                        this.$createToast({
                            time: 1000,
                            type:"error",
                            txt: res.data.err_msg,
                            mask:true
                        }).show();
                    }
                })
                .catch();
        }
    }
};
</script>

<style scoped>
    .wallet{
        background: #fff;
        height:100%;
    }
    #header{
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    #header .header{
        width:355px;
        height: 110px;
        margin:0 auto 0 auto;
        padding-top: 30px;
        border-radius: 10px;
        background: #FC9153;
        font-size:20px;
        font-weight: bolder;
        color:#fff;
        text-align: center;
        box-sizing: border-box;
    }
    #header .header h2{
        margin-bottom: 10px;
    }
    #header .header h3{
        font-size:18px;
    }
    #header .deposit-button{
        width:355px;
        margin:15px auto 10px 10px;
        border-radius: 10px;
        box-sizing: border-box;
    }
    #list-tabs{
        height:50px;
        background: #fff;
        font-size:14px;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
    }
    #deposit-list dl{
        padding:0 10px;
        height:50px;
        line-height: 50px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
    }
    #deposit-list dl:nth-last-child(1){
        border-bottom: none;
    }
    #deposit-list dt{
        width:210px;
        float: left;
    }
    #deposit-list dd{
        width:140px;
        text-align: right;
        float: right;
    }
</style>

